// 跑步数据信息
.data-info {
    /*  height: 16vh; */
    background: #fff;
    padding-left: 5%;
    color: rgba(51, 51, 51, 100);
    font-size: 16px;
    font-family: PingFangSC-regular;
    border-bottom: 1px solid #ccc;

    .title {
        font-size: 16px;
        line-height: 42px;
        text-align: left;
    }

    .num {
        line-height: 58px;
        color: rgba(66, 148, 255, 100);
        font-size: 48px;
        text-align: left;
        font-family: PingFangSC-bold;
    }
}

// 地图容器
.map {
    flex: 1;
}

// 倒计时
.gobtn {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -30%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    font-size: 90px;
    line-height: 200px;
    text-align: center;
    font-family: SourceHanSansSC-bold;
    background-color: rgba(66, 148, 255, 0.51);
    color: rgba(21, 146, 204, 0.92);
}

// 各级蒙层公用样式
.maskcountdownn,
.sport-panel,
.map-state {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

//倒计时蒙层
.maskcountdownn {
    display: none;
    z-index: 100;
    background-color: rgba(21, 146, 204, 100);

    .numcountdown {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 200px;
        line-height: 200px;
        text-align: center;
        color: rgba(255, 255, 255, 100);
        font-size: 120px;
        font-family: PingFangSC-bold;
    }
}

// 运动数据面板蒙层
.sport-panel {
    display: none;
    z-index: 200;
    background-color: rgba(21, 146, 204, 100);

    h3 {
        padding: 5%;
        color: rgba(255, 255, 255, 100);
        font-size: 24px;
        font-family: PingFangSC-regular;
    }

    .rundata {
        width: 100%;
        height: 140px;
        line-height: 140px;
        text-align: center;
        color: rgba(255, 255, 255, 100);
        font-size: 20px;
        font-family: PingFangSC-regular;

        span {
            color: rgba(255, 255, 255, 100);
            font-size: 80px;
            text-align: left;
            font-family: Arial-regular;
        }
    }

    .map-icon {
        padding-left: 5%;
        padding-right: 5%;

        span {
            color: rgba(172, 223, 255, 100);
            font-size: 14px;
            text-align: left;
            font-family: PingFangSC-regular;
        }

        .iconditu {
            font-size: 40px;
            color: #fff;
        }
    }

    // 仪表盘
    .dashboard {
        display: flex;
        text-align: center;
        color: rgba(170, 217, 247, 100);
        font-size: 16px;
        font-family: PingFangSC-regular;

        .iconfont {
            font-size: 20px;
            color: #fff;
        }

        .iconshijiyongshi {
            font-size: 36px;
        }
    }

    .btn-group {
        width: 100px;
        height: 100px;
        text-align: center;
        border-radius: 100%;
        color: #fff;

        .iconfont {
            font-size: 24px;
        }
    }

    .icon-stop-container {
        position: fixed;
        bottom: 100px;
        left: 50%;
        transform: translateX(-50%);
        background-color: skyblue;
    }

    // 按钮组 继续 & 结束
    .btns {
        display: none;
        position: fixed;
        width: 100%;
        bottom: 100px;
    }

    .icon-continue-container {
        background-color: green;
    }

    .icon-over-container {
        background-color: pink;
    }
}

//地图蒙层
.map-state {
    display: none;
    z-index: 300 !important;
    // background: #000;
}

//数据卡片
.map-card {
    display: none;
    position: fixed;
    bottom: 50px;
    height: 150px;
    width: 90%;
    left: 5%;
    z-index: 350;
    border-radius: 10px;
    background-color: #fff;
    padding: 20px;

    //日期
    .date {
        position: absolute;
        right: 10px;
        top: 20px;
    }

    .card-content {
        border-top: 1px dashed #ccc;
        text-align: center;
    }
}

// 返回&完成按钮
.back-btn,
.complete-btn {
    position: fixed;
    top: 10px;
    left: 20px;
    z-index: 350;
    background-color: #fff;
    border: 1px solid #ccc;
}

// 返回按钮 
.back-btn {
    display: none;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    font-weight: 700;
}

.complete-btn {
    display: none;
    width: 50px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 4px;
    font-size: 14px;
}

/* 隐藏百度地图小logo */
.anchorBL {
    display: none;
}